<template>
  <div>
    <p>{{ count }}</p>
    <p>{{ foo }}</p>
    <p>{{ arr }}</p>
    <p>{{ count10 }}</p>
    <p>{{ count10 }}</p>
    <p>{{ count10 }}</p>
    <button @click="changePinia">改变数据</button>
  </div>
</template>

<script setup>
import { useMainStore } from './store/index';
import { storeToRefs } from 'pinia'

// pinia测试
const pinia = useMainStore()
const { count, foo, arr, count10 } = storeToRefs(pinia)
const changePinia = () => {
  // 方式一
  // pinia.count++
  // 方式二
  // 如果需要修改多个数据，使用$patch
  // pinia.$patch({
  //   count: pinia.count + 1,
  //   foo: 'hello'
  // })
  // 方式三
  // pinia.$patch(state => {
  //   state.count++
  //   state.foo = 'hello'
  //   state.arr.push(4)
  // })
  // 方式四，逻辑比较多利用actions
  pinia.changeStae(10)
}
</script>

<style scoped>
</style>
